/*************************************
@name:		移动端输入手机号模拟键盘，基于zepto，rem适配，请使用fastclick优化click事件，样式文件telkeyboard.1.3.css
@author:	cm.yu
@date:		2017/11/23
@ver:		1.3

调用方法：
$(function(){
	$('.btn').telkeyboard();
})
*************************************/
(function($){
	$.fn.telkeyboard = function(options){
		var defaults = {//默认参数
			zindex:'',
			mask:true//默认打开遮罩
		}

        /**
         * 页面滚动方法【移动端】
         * @type {{lock, unlock}}
         * lock：禁止页面滚动, unlock：释放页面滚动
         */
		var pageScroll = {
			lock:function(){
				$(document).on('touchmove',function(e){
					e.preventDefault();
				})
				//console.log('lock')
			},
			unlock:function(){
				$(document).off('touchmove');
				//console.log('unlock')
			}
		}
		
		var opts = $.extend({},defaults,options),
			$body = $(window.document.body),
			$mask = $('<div class="keyboard-mask"></div>'),
			_this = $(this),
			tempVal = '',		//临时存储号码
			numbers = '';		//1~9 数字键dom
		
		/*
		 *	1~9 dom结构
		 */
		for(i = 1; i < 10; i++){
			numbers += '<a href="javascript:;" class="keyNums">'+i+'</a>';
			if(i == '9'){
				numbers += '<a href="javascript:;" class="keyCancel">收起</a>' +
						   '<a href="javascript:;" class="keyNums">0</a>' +
						   '<a href="javascript:;" class="keyBackspace"><i class="iconfont icon-ios-backspace"></i></a>';
				break;
			}
		}
		
		/*
		 *	dom结构输出
		 */
		var $dom = $('' +
			'<div class="telkeyboard">' +
			'	<div class="telkeyboard-title">输入手机号码</div>' +
			'	<div class="telkeyboard-error"></div>' +
			'	<div class="telkeyboard-hd"></div>' +
			'	<div class="telkeyboard-bd">' +
			'		'+numbers+'' +
			'' +
			'	</div>' +
			'</div>');
		if(!$('head link').hasClass('telkeyboard_css')){
			$('head').append('<link rel="stylesheet" href="css/telkeyboard.1.3.css" class="telkeyboard_css">');
		}
		
		var	$keyNums = $dom.find('.telkeyboard-bd .keyNums'),		//0~9 key
			$keyCancel = $dom.find('.telkeyboard-bd .keyCancel'),	//取消 key
			$keyBackspace = $dom.find('.telkeyboard-bd .keyBackspace'),		//回退 key
			$number = $dom.find('.telkeyboard-hd'),		//弹窗中输入的电话号码
			$errorMsg = $dom.find('.telkeyboard-error');	//错误提示	
		
		_this.on('click',function(){
			if(opts.mask == true){
				$body.append($mask);
			}
			$body.append($dom);
			if(opts.zindex){
				$dom.css({zIndex:opts.zindex})
			}
			pageScroll.lock();
			$(this).data('keyboard','open');
			/*
			 *	获取输入框中的数值，如是数字类型，传递到软键盘中
			 */
			tempVal = $(this).text();
			if(!isNaN(tempVal.replace(/[ ]/g,""))){
				$number.text(tempVal);
			}else{
				tempVal = '';
				$number.text(tempVal);
			}
			$errorMsg.text('');
		})
		
		/*
		 *	键盘绑定事件
		 */
		$keyNums.on('click',function(){
			var	numLen = tempVal.length,
				key = $(this).text();
			if(numLen < 13){
				tempVal += key;
				$number.text(tempVal);
			}
			if(numLen == 2){
				tempVal += ' ';
			}
			if(numLen == 7){
				tempVal += ' ';
			}
			if(numLen == 12){
				var reg = /(1[3-9]\d{9}$)/;
				var tempTel = tempVal.replace(/[ ]/g,"");
				if (!reg.test(tempTel)){
					$errorMsg.text('手机号格式错误！请重新输入');
					return false;
				}else{
					$('[data-keyboard="open"]').text(tempVal).css({fontSize:"0.52rem"});
					keyboard_close();
					console.log(tempVal)
				}
			}
		})

		//回退键
		var numDel;
		$keyBackspace.on('click',function(){
			numDel = tempVal.substring(0,tempVal.length-1);
			if(numDel.length == 8){
				numDel = tempVal.substring(0,tempVal.length-2);
				tempVal = numDel;
			}
			if(numDel.length == 3){
				numDel = tempVal.substring(0,tempVal.length-2);
				tempVal = numDel;
			}
			if(tempVal !== null){
				$number.text(numDel);
				tempVal = numDel;
			}
			if($errorMsg.text() != undefined){
				$errorMsg.text('');
			}
		})		
		
		/*
		 *	关闭软键盘
		 */
		$mask.on('click',function(){
			keyboard_close();
		})
		$keyCancel.on('click',function(){
			keyboard_close();
		})
		var keyboard_close = function(){
			$mask.remove();
			$dom.addClass('telkeyboard_UpOut');
			_this.data('keyboard','');
			pageScroll.unlock();
			setTimeout(function(){
				$dom.removeClass('telkeyboard_UpOut');
				$dom.remove();
			},300)
		}
	}
})(Zepto|| jQuery);